<template>
	<view >
		<view class="status_bar"></view>
		<view class="u-p-30">
			<view  style="text-align: center;margin-top:20%;">
				<view class="u-flex u-row-center u-col-center">
					<view>
						<u-image :src="userAvatar" 
								width="100rpx" height="100rpx" border-radius="16rpx">
							<view  slot="error" style="background-color: #ffffff;">
								<u-icon name="camera-fill" :size="100" color="#606266"></u-icon>
							</view>	
						</u-image>
					</view>
				</view>
				<view class="u-m-t-40">
					<view style="font-size:36rpx;font-weight: bold;">
						<text>{{formatMobile()}}</text>
					</view>
				</view>
			</view>
			<view class="u-m-t-60 u-p-l-30 u-p-r-30">
				<template v-if="loginType==0">
					<view>
						<u-field border-bottom border-top  type="password"
								 style="font-size: 34rpx;padding:30rpx 0rpx;" placeholder-style="font-size:32rpx;color:#b8b8b8"
								v-model="loginForm.password" label="密码" placeholder="请填写微信密码"></u-field>
					</view>
					<view class="u-m-t-40"  style="color: #346287;font-weight: 500;" @click="changeLoginWay(1)">
						<text>用短信验证码登录</text>
					</view>
				</template>
				<template v-if="loginType==1">
					<view class="u-border-top u-border-bottom" :class="isSendFlag?'u-p-b-20':''">
						<view>
							<u-field :border-bottom="false"  :border-top="false" 
									 style="font-size: 34rpx;padding:20rpx 0rpx;" 
									 placeholder-style="font-size:30rpx;color:#b8b8b8"
									 :field-style="{fontSize:'34rpx'}" 
									 v-model="loginForm.smsCode"
									 label="验证码" type="number"
									 placeholder="请输入验证码">
								<view slot="right" @click="getCode()" v-if="isSendFlag==false"
										style="background-color: #dddddd;color:#000000;
										border-radius: 12rpx;text-align: center;font-size: 30rpx;padding:16rpx 24rpx;">
									<text>{{sendTip}}</text>
								</view>	
							</u-field>
						</view>
						<view v-if="isSendFlag==true" class="codeTipBox"
										style="">
							<text>{{codeTips}}</text>
						</view>
					</view>
					<view class="u-m-t-40"  style="color: #346287;font-weight: 500;" @click="changeLoginWay(0)">
						<text>用密码登录</text>
					</view>
					<u-verification-code :seconds="second" ref="uCode" 
										start-text=""
										end-text=""		
										@change="codeChange"  @end="end"
										change-text="X秒后重新获取"></u-verification-code>
				</template>
			</view>
		</view>
		<view style="width:100%;position: absolute;bottom: 50rpx;">
			<view class="u-flex u-row-center u-col-center" style="width: 100%;">
				<view  style="width:50%;">
					<u-button type="success" @click="bindLogin" :custom-style="customBtnStyle">登录</u-button>
				</view>
			</view>
			<view class="u-flex u-row-center u-col-center u-font-28" style="margin-top: 100rpx;">
				<view style="color: #346287;font-weight: bold;">找回密码</view>
				<view class="u-m-l-20 u-m-r-20" style="color: #bbbbbb;font-size: 20rpx;">|</view>
				<view style="color: #346287;font-weight: bold;">紧急冻结</view>
				<view class="u-m-l-20 u-m-r-20" style="color: #bbbbbb;font-size: 20rpx;">|</view>
				<view style="color: #346287;font-weight: bold;" @click="showSheetFlag=true">更多选项</view>
			</view>
		</view>
		<u-action-sheet :list="sheetList" v-model="showSheetFlag" @click="sheetClick" 
						:border-radius="30"
						safe-area-inset-bottom></u-action-sheet>
		<u-modal v-model="sendSmsFlag" 
				 show-confirm-button show-cancel-button	
				 confirm-text="好" cancel-text="取消" 
				 confirm-color="#2d5675" cancel-color="#000000"
				 :title-style="{color: '#000000'}" 
				 @confirm="confirmSend" @cancel="cancelSend"
				 title="确认手机号码">
				<view style="padding: 30rpx;text-align: center;color: #909399;font-size: 32rpx;padding-bottom: 50rpx;">
					<view>我们将发送验证码短信到这个号</view>
					<view>码:</view>
					<view>{{formatMobile()}}</view>
				</view>
		</u-modal>
		<template v-if="lastStepFlag==true">
			<we-login-start-vue @agree="lastAgree" @close="closePop"></we-login-start-vue>
		</template>
	</view>
</template>

<script>
	import weLoginStartVue from './we-login-start.vue';
	export default {
		components:{
			weLoginStartVue
		},
		data() {
			return {
				second:60,
				lastStepFlag:false,
				showSheetFlag:false,
				sheetList:[
					{
						text:'登录其他账号',
						fontSize: 32,
						color: 'black',
					},
					{
						text:'前往安全中心',
						fontSize: 32,
						color: 'black',
					},
					{
						text:'反馈问题',
						fontSize: 32,
						color: 'black',
					},
					{
						text:'注册',
						fontSize: 32,
						color: 'black',
					}
				],
				userAvatar:'',
				customBtnStyle:{
					borderRadius:'20rpx'
				},
				labelStyle:{
				   "color":"#606266",
				   "fontSize":"32rpx"
				},
				sendTip:'获取验证码',
				codeTips:"",
				isSendFlag:false,
				loginType:0,
				loginForm:{
					password:'',
					mobile:'',
					smsCode:'',
				},
				sendSmsFlag:false,
			};
		},
		onLoad:function(){
			let loginParam= uni.getStorageSync("wxLoginParam");
			if(loginParam){
				let param= JSON.parse(loginParam);
				this.userAvatar=param.avatar;
				this.loginForm.mobile=param.mobile;
				//this.loginForm.password=param.password;
			}
			if(this.loginForm.mobile.length<1){
				this.lastStepFlag=true;
			}
		},
		
		methods:{
			lastAgree:function(obj){
				this.loginForm.mobile=obj.phone;
				this.lastStepFlag=false;
				this.userAvatar="";
			},
			closePop:function(){
				let that=this;
				setTimeout(function(){
					that.lastStepFlag=false;
				},250)
			},
			sheetClick:function(index){
				if(index==0){
					this.lastStepFlag=true;
				}
				if(index==3){
					this.$u.route({
						url:"/pages/index/register",
						params: {}
					})
					return;
				}
			},
			changeLoginWay:function(type){
				let that=this;
				that.loginType=type;
				if(type==1){
					that.isSendFlag=false;
					that.sendTip="获取验证码";
					that.codeTips="";
					that.$nextTick(function(){
						that.$refs.uCode.reset();
					})
				}
			},
			getCode:function(){
				this.sendSmsFlag=true;
				return;
			},
			confirmSend:function(){
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					setTimeout(() => {
						uni.hideLoading();
						this.$refs.uCode.start();
						this.isSendFlag=true;
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			cancelSend:function(){
				this.sendSmsFlag=false;
				return;
			},
			codeChange(text) {
				this.codeTips = text;
			},
			end(){
				this.isSendFlag=false;
				this.sendTip="重新获取";
			},
			formatMobile:function(){
				let that=this;
				let tel=this.loginForm.mobile;
				if(tel.length>0){
					let first=tel.substring(0,3);
					let second=tel.substring(3,7);
					let third=tel.substring(7,11);
					let telStr="+86 "+first+" "+second+" "+third;
					return telStr;
				}
				else{
					return "请选择账号";
				}
			},
			bindLogin:function() {
				let that=this;
				let data={
					mobile: that.loginForm.mobile,
					password: "1qaz2wsx",
					userDeviceId:this.vuex_deviceMode?this.vuex_deviceMode:new Date().getTime()
				};
				if(that.loginType==0){
					if(that.loginForm.password.length<1){
						that.globalUtil.utilAlert("参数错误,请重新输入");
						return;
					}
					data.password=that.loginForm.password;
				};
				if(that.loginType==1){
					if(that.loginForm.smsCode.length<1){
						that.globalUtil.utilAlert("参数错误,请重新输入");
						return;
					}
					data.password="1qaz2wsx";
				}
				console.log("登录响应参数",data);
				this.$u.api.sys.login(data).then(res => {
					console.log("登录响应结果",res);
					if(res.code==200){
						//存用户信息和token;
						let userInfo= res.data.userInfo;
						if(userInfo!=null&&userInfo!=undefined){
							this.$u.vuex("vuex_userInfo",userInfo);
							let avatar= userInfo.avatar;
							data.avatar=avatar;
						}
						let token=res.data.token;
						if(token!=null&&token!=undefined&&token.length>0){
							this.$u.vuex('vuex_token', token);
						}
						//将登录的用户名和密码放入vuex缓存中
						this.$u.vuex('vuex_loginParam',data);
						uni.setStorageSync("wxLoginParam",JSON.stringify(data));
						setTimeout(function(){
							that.$u.route({
								type:'reLaunch',
								url:"/pages/chat/chatGroupList",
								params: {}
							})
						},500);
					}else{
						this.globalUtil.utilAlert(res.message);
						return;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
 .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
	.codeTipBox{
		width: 280rpx;
		background-color: #dddddd;
		color:#909399;
		margin-top: 30rpx;
		margin-left: 140rpx;
		border-radius: 12rpx;
		text-align: center;
		font-size: 30rpx;
		padding:16rpx 24rpx;
	}
</style>
